<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="lib/bootstrap.min.css">
        <script type="text/javascript" src="lib/jquery.min.js"></script>
    </head>
    <style>
        .navbar-inverse {
            background-color: #6f5499;
            border-color: #fff;
        }
        .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {
            color: #fff;
            background-color: transparent;
        }
        table {
            border-bottom:1px solid #ddd;
        }
        table th {
            text-align:center;
        }table td {
            text-align:center;
            font-size:12px;
        }
        .add-app {
            color:#FFCF00!important;
        }
        .input-text {
            width:200px;
            border:none;
            text-align:center;
            outline:none;
        }
        .btn-xs {
            outline:none;
        }
        .navbar-nav li:hover {
            background-color:#FFF;
        }
        .navbar-nav li:hover a {
            color:#3E8CB5!important;
        }
        .navbar-nav a:hover .host-layer {
            visibility:visible!important;
            border:1px solid #ddd;

        }
        .host-layer {
            position: absolute;
            width: 265px;
            height: 150px;
            background-color: #FFF;
            left: 0px;
            border: 1px solid #ddd;
            top: 50px;
            border-top: none!important;
        }
        .host-layer p {
            color:#999;
            font-size:12px;
            margin-top:15px;
            padding-left:15px;
        }
        .host-layer p span {
            padding-right:20px;
        }
        .host-layer p input[type=text] {
            width:180px;
            color:#999;
            outline:none;
        }
        .lang-server {
            float: right;
            clear: both;
            color: #FFF;
            font-size: 18px;
            margin-top: 12px;
            text-decoration:none!important;
        }
        .lang-server:hover {
            color:#FFF;
        }
        .lang-list {
            margin-top: 12px;
        }
    </style>
    <body ng-app="config-server" ng-controller="api">
        <input type="hidden" value='' id="inter-json"/>
        <input type="hidden" value='' id="app-name"/>
        <div class="navbar navbar-inverse" role="navigation">
          <div class="container">
             <a href="langServer" class="lang-server">LangServer</a>
            <div class="navbar-header">
              <a class="navbar-brand" href="#">API Config Server</a>
            </div>
            <select class="lang-list" id="files">
                <% files.forEach(function(fname){ %>
                    <option <%=(active == fname ? 'selected="selected"' : '')%>><%=fname%></option>
                <% }) %>
            </select>
          </div>
        </div>
        <div class="container">
            <table class="table">
                <thead>
                    <th>接口ID</th>
                    <th>访问URL</th>
                    <th>操作</th>
                </thead>
                <tbody id="lists">
                <% 
                var count = 0;
                for(var i in file){
                count++;

                 %>
                <tr>
                    <td><input class="input-text" type="text" data-role="key" value="<%=i%>"/></td>
                    <td><input style="width:320px" data-role="value" class="input-text" type="text" value="<%=file[i]%>"/></td>
                    <td>
                        <input type="button" class="btn-xs btn-success" value="保存" data-action="save">
                        <input type="button" class="btn-xs btn-warning" value="删除" data-action="delete">
                        <input type="button" class="btn-xs btn-info" value="增加" data-action="add">
                    </td>
                </tr>
                <% } %>
                <%if(count== 0){%>
                <tr>
                    <td><input class="input-text" type="text" data-role="key" value=""/></td>
                    <td><input style="width:320px" data-role="value" class="input-text" type="text" value=""/></td>
                    <td>
                        <input type="button" class="btn-xs btn-success" value="保存" data-action="save">
                        <input type="button" class="btn-xs btn-warning" value="删除" data-action="delete">
                        <input type="button" class="btn-xs btn-info" value="增加" data-action="add">
                    </td>
                </tr>
                <%}%>
                </tbody>
            </table>
        </div>
<script type="text/javascript">
(function($, window){
    var files = $("#files"),
        list = $("#lists"),
        path = 'configServer?';


    files.change(function(){
        location.href = [path, 'name=', files.val()].join('');
    });

    list.on("click", "[data-action]", actionFn);


    function actionFn(e){

        var e = e.target;
        switch(e.dataset.action){
            case 'delete':
            del(e);
            case 'save':
            save();
            break;
            case 'add':
            add(e);
            break;      
        }
    }

    function getData(){
        var inputs = list.find('[data-role]'),
            data = {},
            len = inputs.length;
        for(var i = 0; i < len; i = i + 2){
            data[inputs[i].value] = inputs[i+1].value;
        }
        return data;
    }

    function save(){
        $.post([path,'name=', files.val(),'&action=save'].join(''), getData(), function(res){
            alert("保存成功");
            console.log(res.msg);
        });
    }

    function del(elem){
        $(elem).parents("tr").remove();
    }

    function add(elem){
        var tr    = $(elem).parents("tr"),
            clone = tr.clone();
        tr.after(clone);
        clone.find("[data-role]").first().focus().end().val('');
    }







})($,window);
</script>
    </body>
</html>